<template>
  <el-scrollbar ref="scroll" style="height: 100%" @wheel.native.prevent="changeScroll">
    <div
      v-for="(item, index) in tagsList"
      :key="index"
      :class="{ 'tag-item': true, active: item.link === currentTag.link }"
      @click="pick(item)"
    >
      {{ item.title }}
      <i
        v-if="item.link !== '/dashboard'"
        class="el-icon-close"
        @click.stop="del(item)"
      />
    </div>
  </el-scrollbar>
</template>

<script>
export default {
  computed: {
    tagsList() {
      return this.$store.state.tagsView.tagsList
    },
    currentTag() {
      return this.$store.state.tagsView.currentTag
    }
  },
  watch: {
    currentTag(val) {
      this.$refs.tags
    }
  },
  methods: {
    changeScroll(e) {
      const wrap = this.$refs.scroll.$refs.wrap
      wrap.scrollLeft = wrap.scrollLeft - e.wheelDelta
    },
    pick(item) {
      this.$router.push(item.link)
      this.$store.commit('tagsView/add', item)
    },
    del(item) {
      this.$store.commit('tagsView/del', item)
      this.$router.push(this.currentTag.link)
    }
  }
}
</script>

<style lang="scss" scoped>
.tag-item {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 15px;
  border-radius: 5px;
  margin-right: 10px;
  background-color: #fff;
  color: #888;
  cursor: pointer;
  &.active {
    color: #ffb200;
  }
  i {
    cursor: pointer;
  }
}

.el-scrollbar {
  height: 100%;
  ::v-deep {
    .el-scrollbar__wrap {
      overflow-x: hidden !important;
      .el-scrollbar__view {
        white-space: nowrap !important;
      }
    }
    .el-scrollbar__bar.is-horizontal > div {
    width: 100%;
  }
  }
}
</style>
